import React, {useEffect, useState} from "react";
import {Dimensions, ScrollView, StyleSheet, View} from "react-native";
import {Avatar} from "react-native-elements/dist/avatar/Avatar";
import {Text} from "react-native-elements";
import {SvgXml} from "react-native-svg";
import {addSvgXml, subSvgXml} from "../libs/svgXml";
import {fontSize_12, fontSize_16} from "./theme";
import {
    addTokenToChain, getChainBaseByChainID, getTokenByChainID,
    getTokenListByChainID, getWalletInfo,
    nowWallet,
    removeTokenFromChain,
    tokenNetType
} from "./smartxL2Libs/L2_Data";

const {width,height,scale} = Dimensions.get("window");

const L2_HomeAssetView = ({navigation,route}:any) => {
    const [homeAsset,setHomeAsset] = useState([
        {
            chainID:"",
            tokenName:"",
            tokenSymbolName:"",
            tokenAddress:"",
            tokenImg:"",
            balance:""
        }
    ])
    useEffect(()=>{
        navigation.setOptions({
            title:"首页资产"
        })
        initHotToken()
    },[])

    const initHotToken = async () => {
        let res = await getTokenListByChainID(nowWallet.chainID,nowWallet.address);
        console.log(res.tokenAddressList)
        let tokenList: any[]  = []
        for(let i = 0 ; i < res.tokenAddressList.length;i++)
        {
            let tokenInfo = await getTokenByChainID(nowWallet.chainID,res.tokenAddressList[i],nowWallet.address)
            if (tokenInfo)
            {
                console.log(tokenInfo)
                tokenList.push({
                    chainID:nowWallet.chainID,
                    tokenName:tokenInfo.tokenName,
                    tokenSymbolName:tokenInfo.tokenSymbloName,
                    tokenAddress:tokenInfo.tokenAddress,
                    tokenImg:tokenInfo.tokenImg,
                    balance:tokenInfo.balance
                })
            }

        }
        let chainBaseInfo = await getChainBaseByChainID(nowWallet.chainID);
        let walletInfo = await getWalletInfo(nowWallet.chainID,nowWallet.address)
        if(chainBaseInfo)
        {
            tokenList.splice(0,0,{
                chainID:nowWallet.chainID,
                tokenName:chainBaseInfo?.coinName,
                tokenSymbolName:chainBaseInfo.name,
                tokenAddress:"",
                tokenImg:chainBaseInfo.img,
                balance:walletInfo.balance
            })
        }
        setHomeAsset(tokenList)
    }
    const removeTokenSelect = async (item: any) => {
        await removeTokenFromChain(item.chainID, item.tokenAddress, nowWallet.address)
        initHotToken()
    }

    return (
        <View style={styles.container}>
            <ScrollView style={{width:"100%"}} showsVerticalScrollIndicator={false}>
                {
                    homeAsset.length?
                        homeAsset.map((item,index)=>(
                            <View style={styles.tokenInfoContainer} key={"hotToken_"+index}>
                                <Avatar source={(typeof item.tokenImg)==="number"?item.tokenImg:{uri:item.tokenImg}} size={37} rounded={true}/>
                                <View style={styles.tokenMsgContainer}>
                                    <View style={styles.tokenInfoView}>
                                        <Text style={styles.tokenName}>{item.tokenName}</Text>
                                        {
                                            item.tokenAddress
                                            ?
                                            <Text
                                                style={styles.tokenAddress}>{item.tokenAddress.slice(0, 8)}...{item.tokenAddress.slice(-8)}</Text>
                                            :
                                            null
                                        }
                                        <Text style={styles.tokenAddress}>余额: {item.balance}</Text>
                                    </View>
                                    {
                                        item.tokenAddress?
                                            <View style={{
                                                padding: 0,
                                                borderWidth: 2 / scale,
                                                borderColor: "#c6c6c6",
                                                borderRadius: 99
                                            }}>
                                                <SvgXml xml={subSvgXml("#c6c6c6")} width={22} height={22} onPress={() => {
                                                    removeTokenSelect(item);
                                                }}/>
                                            </View>
                                            :null
                                    }
                                </View>
                            </View>
                        )):null
                }
            </ScrollView>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "white"
    },
    tokenInfoContainer:{
        width:"100%",
        flexDirection:"row",
        alignItems:"center"
    },
    tokenMsgContainer:{
        flexDirection:"row",
        alignItems:"center",
        flex:1,
        paddingTop:15,
        paddingBottom:15,
        borderBottomColor:"#eeeeee",
        borderBottomWidth:2/scale,
        marginLeft:10,
        // backgroundColor:"pink"
    },
    tokenInfoView:{
        flexDirection:"column",
        flex:1,

    },
    tokenName:{
        fontSize:fontSize_16
    },
    tokenAddress:{
        fontSize:fontSize_12,
        color:"#939393"
    }
})
export default L2_HomeAssetView;


